<template>
  <div>
  <h2 :class="{ red: true, thin: flag }">App组件</h2>
    <button @click="flag = !flag">切换类名</button>
    <ul :style="{ padding: '5px', margin: '10px', border: 'solid 2px red' }">
   <li>hello world</li>
    </ul>
    <my-left></my-left>
    <my-right></my-right>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRighr.vue'
export default {
   data () {
    return {
      flag: true
    }
  },
  components:{ MyLeft, MyRight }
}
</script>
<style lang="less" scoped>
  .red {
  color: red;
}
.thin {
  font-weight: 200;
}
.container /deep/ p {
  background-color: cornflowerblue;
}
</style>